<template>
    <view class="prize-list-container">
        <view class="prize-list-title">奖品列表</view>

        <view class="prize-list">
            <view v-for="(prize, index) in prizes" :key="index"
                :class="['prize-item', prize.level === '一等奖' ? 'first-prize' : '']">
                <view class="prize-image-container">
                    <image class="prize-image" :src="prize.image" mode="aspectFit" />
                </view>
                <view :class="['prize-level', prize.level === '一等奖' ? 'first-prize-level' : '']">
                    {{ prize.level }}
                </view>
                <view class="prize-content">{{ prize.content }}</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

// 示例奖品数据
const prizes = ref([
    {
        level: '一等奖',
        content: 'iPhone 15 Pro Max',
        image: '/static/images/prize1.png'
    },
    {
        level: '二等奖',
        content: 'iPad Air',
        image: '/static/images/prize2.png'
    },
    {
        level: '三等奖',
        content: 'AirPods Pro',
        image: '/static/images/prize3.png'
    },
    {
        level: '四等奖',
        content: '200元购物券',
        image: '/static/images/prize4.png'
    },
    {
        level: '五等奖',
        content: '50元购物券',
        image: '/static/images/prize5.png'
    }
]);
</script>

<style>
.prize-list-container {
    padding: 20rpx;
}

.prize-list-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
}

.prize-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.prize-item {
    width: 48%;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    background-color: #f8f8f8;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 20rpx;
    box-sizing: border-box;
    transition: transform 0.3s;
}

.prize-item:active {
    transform: scale(0.98);
}

.first-prize {
    width: 100%;
    background-color: #fff9e6;
    border: 2rpx solid #ffcc00;
    box-shadow: 0 4rpx 16rpx rgba(255, 204, 0, 0.2);
}

.prize-image-container {
    width: 100%;
    height: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16rpx;
}

.first-prize .prize-image-container {
    height: 300rpx;
}

.prize-image {
    width: 80%;
    height: 80%;
}

.prize-level {
    font-size: 28rpx;
    font-weight: bold;
    color: #666;
    margin-bottom: 8rpx;
    text-align: center;
}

.first-prize-level {
    color: #ff6600;
    font-size: 32rpx;
}

.prize-content {
    font-size: 26rpx;
    color: #333;
    text-align: center;
}

.first-prize .prize-content {
    font-size: 30rpx;
    font-weight: bold;
}

/* 响应式布局 */
@media screen and (max-width: 500px) {
    .prize-item {
        width: 100%;
    }
}
</style>